Amplify CLI version 8.3.1 を使って Amplify 入門ハンズオンやってみた

テクニカルサポートチームの川崎です。

Amplify 入門ハンズオンについて

私たちのチームが担当するAWSサービスの1つに AWS Amplify があります。

お客様からお問い合わせをいただくのですが、 正直なところ、以前はサービスの全体像を掴みかねており、お問い合わせの内容を、深く理解するのが難しいサービスとなっていました。

Amplify学習リソース集 を参考に、 サービスの理解を深めていたのですが、 掲載されているリンクに 「AMPLIFY SNS WORKSHOP」 という非常に内容の深いコースがあります。

こちらは、私の個人的な感想ですが、その分野の初心者が最初に取り組むには少々ハードルが高い内容 となっていました。

2022年2月に Amplifyの入門ハンズオン が公開されました。 フロントエンドが専門でなくても、非常に取り組みやすい内容になっていましたので、 さっそくチームのメンバーと共に取り組んでみました。

Amplify CLI バージョン8 がリリースされました

2022年4月7日に Amplify CLI の バージョン 8 がリリースされました。

ChangeLog によると、 Amplify CLI のバージョン8.0.0 は、 インストール時に依存関係をたどる代わりに、 バイナリ実行可能ファイルをダウンロードするようになりました。 そのおかげで、インストール時間や実行時間が短縮され、 クライアントマシンでのストレージ使用量も削減された、とのことです。

Change Log
npm install -g @aws-amplify/cli now downloads a binary executable instead of traversing npm for all dependencies.
Benefits:
pkg cli decreases installation time by 92.63% from 216.81s to 15.974s.
pkg cli enjoys a 32.9% runtime performance benefit for example on the amplify --version command, from 1.608s to 1.079s.
pkg cli decreases storage use on client machines by 35.71% from 924M to 594M.
pkg cli guarantees parity across all users for a specific version regardless of consumption mechanism (npm vs raw pkg cli download)
pkg cli guarantees dependencies are tested, preventing supply chain attacks a la ua-parser-js and colors.

Amplify CLI の直近バージョンのリリース履歴

8.3.1 2022-05-27
8.3.0 2022-05-24
8.2.0 2022-05-10
8.1.0 2022-04-29
8.0.3 2022-04-27
8.0.2 2022-04-18 
8.0.1 2022-04-11
8.0.0 2022-04-07
7.6.26 2022-03-23
7.3.0 2021-11-15
6.0.0 2021-09-18
5.0.0 2021-06-16
4.37.0 2020-12-01

改めて 入門ハンズオンについて

Amplify 入門ハンズオンは、 AWS Hands-on for Beginners シリーズのコンテンツとして、 2022年2月に公開されました。

AWS Hands-on for Beginners シリーズ （別名：初心者向けハンズオン）は、2022年5月現在、22個のコンテンツが提供されています。

AWSの多様なサービスを反映して、 非常に幅広い内容となっており、 スキルアップしたい方にオススメのコンテンツです。 オンデマンド形式で提供されているので、 わからなかった部分を繰り返し確認できるのが、サービスを深く理解できる理由ではないかと考えています。

Amplify 入門ハンズオン の公開後に、Amplify CLI の新バージョンがリリースされていますので、 以下の内容では、バージョン情報を反映しています。

Amplifyの構成要素の変更

Amplify 入門ハンズオンのスライドでは、Amplify の構成要素は次の内容でした。

• Amplify ライブラリ
• Amplify CLI
• Amplify Console
• Amplify Admin UI

※ Amplify 入門ハンズオンのスライドより引用

先日行われた AWS Summit Online 2022 の Amplify セッションの資料では、下記の内容に変更されておりました。

Level Up! AWS Amplify〜 爆速かつスケーラブルなフルスタック Web / モバイルアプリケーションの開発 〜(AWS-47)
※ AWS Summit Online 2022の無料登録が必要です。

AWS Amplify の主要機能 (p.5)

• Amplify CLI
• Amplify Libraries
• Amplify Studio
• Amplify Hosting

「Amplify Console」は 「Amplify Hosting」と名称が変更になったようです。 また「Amplify Admin UI」の機能は「Amplify Studio」へと、発展的に統合されたようです。

名称が変わっても、混乱しないようにしたいですね。

ハンズオン実行

それでは、ハンズオンのスライドを確認しながら、手順を実行していきます。

インストールするモジュールのバージョンを下記の内容に変更しました。

環境構築の流れ

• Node.js 環境のセットアップ（インスタンスにインストール済み）
  • $ node -v
• Amplify CLI のインストールとセットアップ
  • $ npm install -g @aws-amplify/cli@8.3.1
  • $ amplify configure
• Reactアプリの作成
  • $ npx create-react-app hands-on-todo
• Amplify Project の初期化コマンド
  • $ amplify init
• Amplify Framework のインストール
  • $ npm install aws-amplify@4.3.23 @aws-amplify/ui-react@2.18.2

FE/API/DB編の手順

• Amplify CLI でAPI の追加
  • $ amplify add api
• AWS への反映
  • $ amplify status
  • $ amplify push
• Amplify Docs 内にあるサンプルコードを追加
• 動作確認
  • $ npm start

Auth編の手順

• Amplify CLI でAuth の追加
  • $ amplify add auth
• AWS へ反映
  • $ amplify status
  • $ amplify push
• Amplify Docs 内の記載内容の通りにコードを修正
• 動作確認
  • $ npm start

Hosting編の手順

• アプリケーションのホスティング
  • $ amplify add hosting
• クラウドリソースの変更とホスティングするアプリのビルド、デプロイ
  • $ amplify publish
• 動作確認

まとめ

Amplify CLI の開発の進展に伴い、インストールするモジュールのバージョン変更などを行いました。

私は、フロントエンドが専門ではないので、 当初は Amplify を理解するのは難しかったです。

このハンズオンを1回やっただけでは、理解が追いつかなかったのですが、 ハンズオンを3周ほど実行することで、理解が深まりました。

amplify add *

で、サクッと 機能が追加できてしまうのは、Amplify の素晴らしさだと思います。

Amplify は奥が深く、まだまだ進化中ですので、今後も理解を深めていきたいですね。

本ブログの内容が、みなさまのお役に立てたら幸いです

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。